<template>
    <div>
      <div class="header block">
        <div class="row">
          <div class="search">
            <text>生效时间：   </text>
            <el-date-picker
                v-model="selectTime"
                type="date"
                placeholder="选择时间"
            />
            <text>方案类型：</text>
            <el-select v-model="comboCode" class="screen-i search-type">
              <el-option v-for="(item,index) in plansList" :label="item.label" :value="item.value" :key="index"/>
            </el-select>
            <input
                type="text"
                placeholder="请输入姓名/身份证/被派遣单位名称"
                class="input search-input"
                v-model="searchText"
                @keydown.enter="search"
            />
            <button class="btn" @click="search">搜索</button>
            <button class="btn-white" @click="onReset">重置</button>
          </div>
          <div class="flex.align">
<!--            <button class="derivation" @click="getDerivationRoster()">-->
<!--              导出名单-->
<!--            </button>-->
            <export-button @export="getDerivationRoster()">导出名单</export-button>
          </div>
        </div>
      </div>
      <div class="container block block-alone">
        <el-tabs model-value="detail">
          <div class="header height-right">
            <div class=""></div>
          </div>
          <div class="table">
            <el-table
              :data="tableData"
              style="width: 100%"
              ref="dataTable"
              :header-row-style="{ color: '#202536' }"
              :row-style="{ color: '#5E617D' }"
              :row-key="rowKeyInit"
              type="selection"
              :cell-style="{ textAlign: 'center' }"
              :header-cell-style="{ 'text-align': 'center' }"
            >
              <el-table-column type="selection" width="55" reserve-selection />
              <el-table-column type="index" label="序号" width="100px" reserve-selection/>
              <el-table-column prop="userName" reserve-selection label="姓名" width="130px"/>
              <el-table-column class="card-no" reserve-selection prop="idCardNo" label="身份证号"/>
              <el-table-column label="方案类型" reserve-selection prop="companyPlanName" >
                <template v-slot="scope">
                    <!--  -->
                    <div class="tab-type-box">
                        <div>
                            {{ scope.row.companyPlanName }}
                        </div>
                        <div class="tab-type">
                            {{ scope.row.type == 3 ? '灵活保单' : scope.row.type == 4 ? '月单' : '及时生效' }}
                        </div>
                    </div>
                </template>
              </el-table-column>
              <el-table-column prop="serveCompanyName" label="被派遣单位" />
              <el-table-column prop="occupationName" label="所属工种" />
              <el-table-column prop="insurStartTime" label="生效时间" />
            </el-table>
            <el-pagination
              class="pagination"
              v-model:currentPage="pageNum"
              v-model:page-size="pageSize"
              :page-sizes="[10, 30, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="getQueryInsureRecord"
            >
            </el-pagination>
          </div>
        </el-tabs>
      </div>
    </div>
  </template>

<script lang="ts">
import { defineComponent } from 'vue'
import { BillDetailDto, BillDto } from '@/api/bill'
import { dateFormat, downLoadFile } from '@/utils/util'
import {
    getDerivationRoster,
    disposableTransposingArr,
    longInsureRecord,
    longQueryPlans
} from '@/api/long-insure'
import { updateLongEnsureWorker } from '@/api/export'
import { queryPlans } from '@/api/insure-deduction'
import store from '@/store/index'
import axios from 'axios'
export default defineComponent({
    name: 'LongEnsureWorker',
    components: {},
    data () {
        return {
            isBatchPay: false,
            pageSize: 10,
            pageNum: 1,
            total: 0,
            tableData: [] as BillDetailDto[],
            searchText: '',
            searchValue: '',
            detailInfo: {} as BillDto,
            selects: [] as string[],
            isDeletePopup: false,
            idCardNo: '',
            personnelInfo: [] as BillDetailDto[],
            renewalManufactory: [] as disposableTransposingArr[],
            conmpanyPlanId: 0,
            isFactory: false,
            selectTime: dateFormat('YYYY-mm-dd', new Date()), // 筛选选择的时间
            plansList: [],
            comboCode: ''
        }
    },
    created () {
        this.getQueryInsureRecord()
        this.getQueryPlans()
    },
    mounted () {
        // 获取完数据调用
        this.$nextTick(() => {
            // this.$refs.dataTable.toggleAllSelection()
        })
        this.$Bus.on('close2', (e) => {
            console.log(e, 'eeee')
            if (e) {
                this.isFactory = false
            }
        })
    },
    methods: {
        async getDerivationRoster () {
            const result = await updateLongEnsureWorker({
                searchText: this.searchText,
                queryDate: dateFormat('YYYY-mm-dd', new Date(this.selectTime)),
                companyPlanId: this.comboCode
            }, {
                loading: true
            })
            if (!result.fileUrl && result.exportStatus === 0) {
                store.commit('getLongPollingFile', result)
            } else {
                axios({
                    url: result.fileUrl,
                    method: 'GET',
                    responseType: 'blob'
                }).then(async (response) => {
                    await downLoadFile(response, result.exportType, result.updateTime, result.remark)
                    await this.$message.success('导出成功！')
                })
            }
        },
        handleSizeChange () {
            this.pageNum = 1
			this.getQueryInsureRecord()
        },
        rowKeyInit (row: any) {
            return row.id
        },
        search () {
            this.searchValue = this.searchText
            this.pageNum = 1
            this.getQueryInsureRecord()
        },
        onReset () {
            this.searchText = ''
            this.comboCode = ''
            this.search()
        },
        // 获取长期保险在保人员名单
        async getQueryInsureRecord () {
            const result = await longInsureRecord({
                searchText: this.searchText,
                queryDate: dateFormat('YYYY-mm-dd', new Date(this.selectTime)),
                companyPlanId: this.comboCode,
                pageSize: this.pageSize,
                pageNum: this.pageNum
            })
			// console.log(result, 'result')
            this.tableData = result.rows
			this.total = result.total
        },
        // 获取长期保方案列表信息
        async getQueryPlans () {
            const result = await longQueryPlans()
            console.log(result, 'result')
            this.plansList = result.map((item:any) => {
                return {
                    value: item.id,
                    label: item.insurCompanyPlanName
                }
            })
        }
    }
})
</script>

  <style lang="stylus" scoped>
  table()
  .header.block {
    padding 20px
  }

  .basic
    margin-top 20px

  .row
    display: flex
    justify-content: space-between
    align-items: center

  .card-no
    font-size: 35 rpx
  .record-row span {
    padding-left: 20px
  }

  :deep().el-tabs__header.is-top
    display inline-block
    margin-top -20px

  :deep().el-tabs__nav-scroll
    padding-right 20px

  .height-right
    float: right
  .el-tabs__header
    margin: 0

  .block-alone
    padding: 0 24px 0

  .screen-i
    width 50px
    margin-right 16px
    padding-left: 10px
    padding-right: 15px

  .search-type
    width 170px
    margin-right 8px

  .record-top
    display flex
    align-items center
    justify-content center
    margin 20px 0

    .record-top-i
      margin-left 12px

    .decorate
      width 6px
      height 6px
      border-radius 50%
      margin-right 5px

    // background red

    .rovalsState
      color #5E617D
      display flex
      align-items center

    .top-name
      color #202536
      font-size 16px
      font-weight 600

    .top-idcord
      color #5E617D

  .derivation
    height: 40px;
    background: #1989fa;
    border-radius: 4px;
    border: none;
    color: #fff;
    cursor: pointer;
    width: 100px;

  .derivation-right {
    margin-right 16px;
    background: #FFFFFF;
    color: color-black;
    border: 1px solid border-color;
  }
:deep() .el-date-editor.el-input
    margin-right 20px
.tab-type-box
    display: flex;
    flex-direction: column;
    align-items: center;
    .tab-type
        background #EBEFFD
        padding 2px 5px
        color #3E5FF5
        font-size 14px
        border-radius 2px
  </style>
